<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<script src="../lib/js/jquery.min.js"></script>
<script src="../lib/js/echarts.min.js"></script>
<script src="../lib/js/maptalks.min.js"></script>
<script src="../lib/js/echarts-gl-master.m.js"></script>
<script src="../js/public.js"></script>
<script src="../data/data3D.js"></script>
<script src="../data/dataBld.js"></script>

<body>
<div id="view" style="height:100%;min-height:900px; width:100%"></div>


<script language="JavaScript">
    var id = "view";
    var myChart;
    var center = [103.041575, 30.010118];


    $.getJSON('../data/data-1524056463493-H1PcbpN2z.json', function(buildingsGeoJSON) {

        buildingsGeoJSON = bld;
        var builds= buildingsGeoJSON.map(function(feature){
            return {"type":"Feature",
                "properties":{"name":Math.random().toString(),"height":feature.height||100},
                "geometry":{"type":"Polygon","coordinates":[feature.polygon]}

            }

        });

        echarts.registerMap('buildings', {
            "features":builds
        });

        var regionsData = builds.map(function(feature) {
            return {
                name: feature.properties.name,
                value: Math.random()*1,
                height: feature.properties.height,
                itemStyle:{
                    color:'red',
                    borderColor:'red'
                }
            };
        });


        $.getJSON('../data/data-1524055280228-SkugT242f.json', function(linesData) {
            var data = lines;//.features;

            var hStep = 300 / (data.length - 1);
            var taxiRoutes=[];
            var i = 0;
            for (var x in data) {
                var lnglats = data[x].geometry.coordinates
                taxiRoutes.push({
                    coords: lnglats,
                    lineStyle: {
                        color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * x))

                    },
                    value:Math.random()*200
                })
            }

            var option = {
                maptalks: {
                    center:  [103.041575, 30.010118], // [-74.01164278497646, 40.70769573605318], //
                    zoom: 17,
                    pitch: 55,
                    baseLayer: {
                        // 'urlTemplate': 'http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
                        // 'subdomains': ['a', 'b', 'c', 'd']
                        'urlTemplate': 'http://wprd0{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7',
                        'subdomains': ['1','2','3','4'],
                        'cssFilter': 'sepia(90%) invert(90%)'   //sepia     grayscale
                    },
                    altitudeScale: 2,
                    postEffect: {
                        enable: true,
                        FXAA: {
                            enable: true
                        }
                    },
                    light: {
                        main: {
                            intensity: 1,
                            shadow: true,
                            shadowQuality: 'high'
                        },
                        ambient: {
                            intensity: 0.
                        },
                        ambientCubemap: {
                            texture: '../data/data-1491838644249-ry33I7YTe.hdr',
                            exposure: 1,
                            diffuseIntensity: 0.5,
                            specularIntensity: 2
                        }
                    }
                },
                series: [
                    {
                        type: 'map3D',
                        coordinateSystem: 'maptalks',
                        map: 'buildings',
                        data: regionsData,
                        shading: 'realistic',
                        silent: true,
                        instancing: true,
                        realisticMaterial: {
                            metalness: 1,
                            roughness: 0.2,
                        }
                    },
                    {
                        type: 'lines3D',
                        coordinateSystem: 'maptalks',
                        effect: {
                            show: true,
                            constantSpeed: 1,
                            trailWidth: 3,
                            trailLength: 1,
                            trailOpacity: 1,
                            spotIntensity: 10
                        },

                        blendMode: 'lighter',

                        polyline: true,

                        data: {
                            count: function() {
                                return taxiRoutes.length;
                            },
                            getItem: function(idx) {
                                return taxiRoutes[idx]
                            }
                        }
                    }
                ]
            };

            myChart = Init3(option, id);
            var maptalksIns = myChart.getModel().getComponent('maptalks').getMaptalks();
            maptalksIns.on('click', function(e, p) {
                console.log([e.coordinate.x.toFixed(6), e.coordinate.y.toFixed(6)]);

            });
            cout(myChart);

        });



    });

    window.addEventListener('resize', function() {
        myChart.resize();
    });

</script>
</body>
</html>